<template>
  <div class="container">
    <div class="page__bd">
      <div class="weui-tab">
        <div class="weui-navbar">
          <block v-for="(item,index) in tabs" :key="index">
            <div :id="index" :class="{'weui-bar__item_on':activeIndex == index}" class="weui-navbar__item" @click="tabClick">
              <div class="weui-navbar__title">{{item}}</div>
            </div>
          </block>
          <img src="../../imgs/addSmall.png" alt="" style="width:30rpx;height:30rpx;margin-top:36rpx">
        </div>
        <div class="weui-tab__panel">
          <div class="weui-tab__content" :hidden="activeIndex != 0">
            <img src="../../imgs/addPerson.png" alt="" class="addPersonImg" v-if="show">
            <img src="../../imgs/addTip.png" alt="" class="addTip" v-if="show">
            <navigator url="/pages/addbook/main">
              <img src="../../imgs/addBook.png" alt="" class="addBook">
            </navigator>
            <div class="flexWrap">
              <div class="bookList" v-for = "(item,index) in bookList"  :key="index" >
                <div class="bookImg"></div>
                <h2>飞鸟集</h2>
                <p>[印度]泰戈尔</p>
              </div>
            </div>
          </div>
          <div class="weui-tab__content" :hidden="activeIndex != 1">
            <p style="color:#CECECE;font-size:36rpx;text-align:center;margin-top:50%">该分类暂无图书</p>
          </div>
          <div class="weui-tab__content" :hidden="activeIndex != 2">选项三的内容</div>
          <div class="weui-tab__content" :hidden="activeIndex != 3">选项二的内容</div>
          <div class="weui-tab__content" :hidden="activeIndex != 4">选项三的内容</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import tabBar from '../../components/tabbar'

export default {
  data () {
    return {
      motto: 'Hello World',
      userInfo: {},
      tabs: ['全部', '已读', '工具书','历史书'],
      activeIndex: 0,
      fontSize: 30,
      show:false,
      bookList:[1,2,3,4,5,6,7,8],
    }
  },
  components: {
    tabBar
  },
  computed: {

  },
  onShow () {
    console.log(`INDEX`)
  },
  methods: {
     tabClick(e) {
      console.log(e);
      this.activeIndex = Number(e.currentTarget.id);
    }
  },

}
</script>

<style scoped lang="less">
.container{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.page__bd {
  width:100%;
  height: 100%;
  padding-bottom: 0;
}
.weui-tab__content {
  /* padding-top: 60rpx; */
}
.weui-navbar__item.weui-bar__item_on{
  color:#1387FF
}
.weui-navbar{
  background: #FAFAFA;
  border-bottom:1rpx solid #E5E5E5;
  padding:0 20rpx;
  box-sizing:border-box;
  /* overflow: hidden; */

}
.weui-bar__item_on{
  border-bottom:3px solid #1387FF;
}
.addPersonImg{
  display: block;
  width:260rpx;
  height:200rpx;
  margin: 243rpx auto 0;
}
.addTip{
  position: absolute;
  bottom:84rpx;
  right:180rpx;
  width:282rpx;
  height:200rpx;
}
.addBook{
  position: absolute;
  bottom:32rpx;
  right:32rpx;
  width:128rpx;
  height:128rpx;
}
.flexWrap{
  padding: 32rpx 78rpx 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  .bookList{
    width:158rpx;
    .bookImg{
      width:158rpx;
      height:220rpx;
      background: pink;
    }
    h2{
        color:#222222;
        font-size:26rpx;
        margin: 18rpx 0 10rpx;
        text-align: center;
      }
      p{
        color:#999999;
        font-size:26rpx;
        margin-bottom:40rpx;
        text-align: center;
      }
  }
}
.flexWrap:after{
    content: '';
    width:158rpx;
 }

</style>
